
import React from "react";
import {Form, Steps} from 'antd';
import SelectActions from "./SelectActions";
import ComponentConfig from "./ComponentConfig";
import IndexConfig from "./IndexConfig";
import HintMessage from "./HintMessage";
import FinishConfig from "./FinishConfig";
import Store from "./Store";
import {observer} from "mobx-react";

const { Step } = Steps;

const stepStyle = {
    marginBottom: 20,
    boxShadow: '0px -1px 0 0 #e8e8e8 inset',
};

@observer
class PageConfig extends React.Component{
    constructor(props) {
        super(props);
        this.state = {}
    }

    onStepChange = current => {
        Store.stepCurrent = current
    };

    render() {
        return (
            <div style={{width:"90%"}}>
                <Steps
                    type="navigation"
                    size="small"
                    current={Store.stepCurrent}
                    onChange={this.onStepChange}
                    style={stepStyle}
                >
                    <Step
                        title="功能选择"
                        status="process"
                    />
                    <Step
                        title="表单组件配置"
                        status="process"
                    />
                    <Step
                        title="首页展示配置"
                        status="process"
                    />
                    <Step
                        title="提示信息"
                        status="process"
                    />
                    <Step
                        title="生成页面"
                        status="process"
                    />
                </Steps>
                {/*功能选择*/}
                {Store.stepCurrent === 0 && <SelectActions/>}
                {/*表单组件配置*/}
                {Store.stepCurrent === 1 && <ComponentConfig />}
                {/*首页展示配置*/}
                {Store.stepCurrent === 2 && <IndexConfig form={this.props.form}/>}
                {/*提示信息*/}
                {Store.stepCurrent === 3 && <HintMessage form={this.props.form}/>}
                {/*完成阶段*/}
                {Store.stepCurrent === 4 && <FinishConfig form={this.props.form}/>}
            </div>
        );
    }
}

export default Form.create()(PageConfig);
